import { FooterLayout } from "@/components/utils/footer"
import common from "@/css/common.module.css"
import login from "@/css/login.module.css"
import baseAuthService from "@/services/base.auth.service"
import { StoreContext } from "@/store"
import { LockOutlined, UserOutlined } from "@ant-design/icons"
import { FormRender } from "@whzhuke/antd"

import logo from "@/assets/logo.png"
import { Button, Flex, FormProps, Layout, Typography } from "antd"
import classNames from "classnames"
import React, { useCallback, useContext } from "react"
import crypto from "crypto-js"
const { Footer, Content } = Layout
const Page = () => {
  const { UserStore } = useContext(StoreContext)
  const onFinish = useCallback<Required<FormProps>["onFinish"]>((value: any) => {
    value.password = crypto.MD5(value.password).toString()
    baseAuthService.login(value).then(e => {
      UserStore.setUser(e)
    })
  }, [])
  return (
    <Layout className={classNames(login.bg, common.full)}>
      <Content>
        <Flex className={classNames(common.full)} vertical justify="center" align="center" gap="large">
          <img src={logo} />
          <Typography.Text type="secondary">仓库</Typography.Text>
          <FormRender
            onFinish={onFinish}
            style={{ width: 300 }}
            size="large"
            fieldList={[
              {
                fieldType: "input",
                formItemConfig: {
                  name: "username",
                  required: !0,
                  rules: [{ required: !0, message: "管理员账号不能为空" }]
                },
                config: {
                  prefix: <UserOutlined />,
                  placeholder: "请输入管理员帐号",
                  autoComplete: "off"
                }
              },
              {
                fieldType: "input",
                formItemConfig: {
                  name: "password",
                  required: !0,
                  rules: [{ required: !0, message: "管理员账号不能为空" }]
                },
                config: {
                  type: "password",
                  prefix: <LockOutlined />,
                  placeholder: "请输入管理员密码",
                  autoComplete: "off"
                }
              },
              {
                fieldType: "diy",
                component: (
                  <Button htmlType="submit" type="primary" block>
                    登录
                  </Button>
                )
              }
            ]}
          />
        </Flex>
      </Content>
      <Footer>
        <FooterLayout />
      </Footer>
    </Layout>
  )
}

export default Page
